
<div style="position: fixed;">

</div>

<script src="<?php echo $conf['view_url'];?>js/vue.js<?php echo $static_version;?>"></script>

<!--
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#pm_dialog">Open modal for @mdo</button>
-->

<script type="text/x-template" id="tpl_pm">
<table width="100%">
	<tr>
		<td width="30">
                        <a :href="pm.user_avatar_url">{{ pm.username }}</a>
		</td>
		<td>
			{{ pm.message }}
		</td>
		<td width="100">
			<a href="javascript:void(0);" @click="delete_pm(pm)" class="m-l-sm">
                                <i class="icon-remove text-danger"></i>
                        </a>
		</td>
	</tr>
</table>
</script>

<style>
#pm_dialog .modal-dialog { max-width: 726px;}
#pm_dialog .modal-body > dl { height: 100%;}
#pm_dialog .modal-body > dl > dt { padding: 8px; background: #eee; width: 150px;}
#pm_dialog .modal-body > dl > dd { padding: 8px; }
#pm_dialog .modal-body ul { list-style: none; margin:0px; padding: 0px; }
ul.recentlist li:hover { background: #fff; }
ul.recentlist li.active { background: #fff; }
#pm_link i.icon-envelope-o.newpm { color: ;}

@keyframes pm_flash {
	0% { opacity: 0; } 
	50% { opacity: 1;} 
	100% {opacity: 0;} 
} 
#pm_link i.icon-envelope-o.newpm { animation: pm_flash 1s linear infinite; webkit-animation: pm_flash 2s linear; pointer-events: none }
</style>

<div class="modal fade" id="pm_dialog" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
  	<div class="modal-content">
  	  <div class="modal-header">
  	  	<button type="button" class="close" data-dismiss="modal">
  	  	  <span aria-hidden="true">&times;</span>
  	  	</button>
                <h5 class="modal-title">{{ cuser.username }}</h5>
  	  </div>
  	  <div class="modal-body" style="width: 724px; height: 524px;">
                <dl class="row">
                        <dt class="vtop">
                                <div class="text-center m-y-1">
                                        <img src="<?php echo $user['avatar_url'];?>" class="avatar" />
                                        <br><?php echo $user['username'];?>
                                </div>
                                <ul class="recentlist">
                                        <li v-for="(user,index) in recentlist" @click="change_user(user.uid)" :class="{active: user.uid == cuid}" style="cursor:pointer">
                                                <img :src="user.user_avatar_url" class="avatar-xs" />{{ user.username }}
                                        </li>
                                </ul>
                        </dt>
                        <dd class="vtop">
                                <div id="pmlist">
                                        <ul>
                                                <li v-for="(pm,index) in pmlist" :pmid="pm.pmid">
                                                        <comp-pm :pm="pm" :is_last="index === pmlist.length - 1"></comp-pm>
                                                </li>
                                        </ul>
                                </div>
                                <div>
                                        <textarea style="width: 100%; height: 100px;" v-model="textarea" ref="textarea"></textarea>         
                                        <p class="text-left">
                                                <button @click="create_pm()" type="button" class="btn btn-primary" id="submit" data-loading-text="<?php echo lang('submiting');?>..." style="width: 10rem;"><?php echo lang('confirm');?></button>
                                        </p>
                                </div>
                        </dd>
                </dl>
  	  </div>
  	</div>
  </div>
</div>

<br>
<br>
<br>
<br>
<br>

<?php if($uid) { ?>

<script>
var user = <?php echo xn_json_encode($user);?>;
var uid = user.uid ? user.uid : 0;  // 我的 uid
var jpm_link = $('#pm_link');
jpm_link.on('click', function() {
        show_pm_dialog();
});

// 组件
Vue.component('comp-pm', {
	props: ['pm', 'is_last'],
	template: '#tpl_pm',
	methods: {
	  	delete_pm: function(pm) {
	  		if(!window.confirm('确定删除？')) return;
                        $.xpost(xn.url('pm-delete'), {pmid: pm.pmid}, function(code, message) {
                                if(code == 0) {
                                        var index = app.pmlist.indexOf(pm); 
			                app.pmlist.splice(index, 1);
                                } else {
                                        alert(message);
                                }
                        });
			//app.pmlist = app.pmlist.filter(t => t.pmid != 5)
			//app.pmlist.$remove(pm); // vue 2.0 废弃
	  	}
  	}
});

app = new Vue({
	el: '#pm_dialog',
	data: {
                uid: uid,
                cuid: 0,
                cuser: '',
                recentlist: [],        // 最近联系人列表 = 临时发起对话的列表 + 从服务端获取的列表
                recent_active_list: [],  // 临时发起对话的列表
                recent_request_list: [], // 从服务端获取的列表
                pmlist: [],
                pmlists: {},            // 用来缓存短消息列表
                textarea: '',
	},
	computed: {
                recentlist: function() {
                        var arrlist = [];
                        Array.prototype.push.apply(arrlist, this.recent_active_list);
                        Array.prototype.push.apply(arrlist, this.recent_request_list);
                        return arrlist;
                },
                /*
		pmlist: function() {
                        if(this.cuid == 0) {
                                return [];
                        }
                        var cuid = this.cuid;
                        var pmlists = this.pmlists;
                        if(!pmlists["uid_"+cuid]) {
                                this.pmlists["uid_"+cuid] = [];
                                this.update_pm_list(cuid);
                        }
                        return pmlists["uid_"+cuid];
		}
                */
	},
        watch: {
                cuid: function() {
                         if(this.cuid == 0) {
                                return [];
                        }
                        var cuid = this.cuid;
                        var pmlists = this.pmlists;
                        if(!pmlists["uid_"+cuid]) {
                                this.pmlists["uid_"+cuid] = [];
                                this.update_pm_list(cuid);
                        }
                        this.pmlist = pmlists["uid_"+cuid];
                        this.cuser = this.recentlist.find(user => user.uid == cuid);
                },
                //pmlists: function(val) {
                       // alert('pmlists changed!');
                        //console.log(this.pmlist);
                        //this.pmlist = this.pmlists["uid_"+this.cuid];
                //},
                /*pmlists: {
                        
                        handler: function (val, oldval) {
                                alert('pmlists changed!');
                                console.log(val)
                                console.log(oldval)
                                //console.log(val, oldval);
                                //this.pmlist = this.pmlists["uid_"+this.cuid];
                        },
                        deep: true
                }*/
                /*
                pmlists: function() {
                        alert(777);
                        this.pmlist = this.pmlists["uid_"+this.cuid];
                }*/
        },
	methods: {
                change_user: function(uid) {
                        this.cuid = uid;
                },
		create_pm: function(pmid) {
                        var postdata = {
                                touid: this.cuid,
                                message: this.textarea,
                        };
                        $.xpost(xn.url('pm-create'), postdata, (code, message) => {
                                var pmid = message.pmid;
                                var newpm = {
                                        pmid: message.pmid,
                                        uid: user.uid,
                                        username: user.username,
                                        user_avatar_url: user.avatar_url,
                                        create_date: xn.time(),
                                        message: message.message
                                }
                                this.pmlist.push(newpm);
                                this.textarea = '';
                        });
		},
                // 更新最近联系人列表
                update_recent_list: function() {
                        this.recent_request_list = [];
                        $.xget(xn.url('pm-recent_list'), (code, message) => {
                                if(code == 0) {
                                        this.recent_request_list = message;
                                }
                        });
                },
                // 更新短消息列表
                update_pm_list: function(cuid) {
                        $.xget(xn.url('pm-list-0-'+cuid), (code, message) => {
                                if(code == 0) {
                                        // this.pmlists["uid_"+cuid] = message;
                                        Vue.set(this.pmlists, "uid_"+cuid, message);
                                } else {
                                        alert(message);
                                }
                        });
                }
	},
       
        updated: function() {

	},
        // 窗口弹出的时候才需要初始化
        mounted: function() {
                //this.change_user(1);
        }
});
//app.change_user(1);



// 定时请求数据
var xn_loop_get = function(url, callback) {
        this.url = url;
        this.callback = callback;
};
xn_loop_get.prototype.init_delay = debug ? 5 : 4;
xn_loop_get.prototype.delay = xn_loop_get.prototype.init_delay;
xn_loop_get.prototype.t = null;
xn_loop_get.prototype.cleartimeout = function() {
        if(this.t) {
                clearTimeout(this.t);
                this.t = null;
        }
}
xn_loop_get.prototype.request = function(n) {
        var _this = this;
        this.cleartimeout();
        this.t = setTimeout(function() {
                $.xget(_this.url, function(code, message) {
                       // 表示没有消息，延长请求的时间
                        if(code == 0) {
                                _this.delay *= 2;
                                _this.callback(message);
                        // 如果有消息，则缩短消息更新的时间。
                        } else if(code == 1) {
                                _this.delay = _this.init_delay;
                                _this.callback(message);
                        // 如果发生错误，延迟变得更长
                        } else {
                                _this.delay *= 4;
                        }
                        _this.request();
                });
        }, (n !== undefined ? n : this.delay) * 1000);
};
// 重设 loop 时间
xn_loop_get.prototype.set_delay = function(seconds) {
        //seconds = xn.intval(seconds);
        if(this.delay > seconds) {
                this.delay = seconds;
                this.cleartimeout();
                this.request();
        }
}

// 定时请求是否有新消息。更新图标
var newpmreq = new xn_loop_get(xn.url('pm-new'), function(message) {
        // 如果发现对话框弹出了，则更新最近列表
        if(message == 0) {
                jpm_link.removeClass('newpm');
        } else if(message > 0) {
                jpm_link.addClass('newpm');
                // 如果对话框被弹出，加快请求节奏
                if(!$('#pm_dialog').is(':hidden')) {
                        // 取列表
                        app.update_recent_list();
                // 如果对话框没弹出，放慢请求节奏
                } else {
                        newpmreq.set_delay(20);
                }
        }
});

// 对话框弹出，加快请求节奏
$('#pm_dialog').on('show.bs.modal', function () {
        newpmreq.request(0);
        newpmreq.set_delay(newpmreq.init_delay);
})

// 对话框关闭，放慢请求节奏
$('#pm_dialog').on('hidden.bs.modal', function () {
        newpmreq.set_delay(10);
})
//$('#pm_dialog').modal('show');

// 给对方发但消息
// {uid: 3, username: "Locy", user_avatar_url: "view/img/3.png", count: 0}
function app_add_user(user) {

        if(user && user.uid) {
                 // 需要去除重复
                if(app.recent_active_list.findIndex((v) => v.uid == user.uid) == -1) {
                        app.recent_active_list.unshift({
                                uid: user.uid,
                                username: user.username,
                                user_avatar_url: user.avatar_url,
                                count: 0
                        });
                        //app.cuid = user.uid;
                }
        }
}
function show_pm_dialog(cuid) {

        // 从服务端获取最近联系人
        app.update_recent_list();

        // 指定某一个用户
        if(cuid) {
                app.cuid = cuid;
        // 默认第一个用户，前面是异步 todo:
        } else {
                app.cuid = app.recentlist.length > 0 ? app.recentlist[0].uid : 0;
        }

        app.update_pm_list(app.cuid);

        $('#pm_dialog').modal('show');

        return false;
}
</script>

<?php } ?>
